<template>
  <div class="shelter" v-if="shelter"/>
  <el-container class="container">
    <el-container>
      <el-aside width="200px">
        <personal_menu @onPageChange="getData" class="menu" ref="menu"/>
      </el-aside>
      <el-main>
        <PersonalInformation v-if="page==1" @onShowShelter="ShowShelter" @onCloseShelter="CloseShelter" class="PersonalInformation"/>
        <Address v-if="page==2" @onShowShelter="ShowShelter" @onCloseShelter="CloseShelter"/>
        <MyFavorite v-if="page==3" />
        <OrderSend v-if="page==4" />
        <OrderNotSend v-if="page==5" />
        <History v-if="page==6" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import personal_menu from "@/components/Personal/personal_menu";
import Address from "@/components/Personal/MyAddress/Address";
import OrderSend from "@/components/Personal/MyOrder/OrderPay";
import OrderNotSend from "@/components/Personal/MyOrder/OrderNotPay";
import PersonalInformation from "@/components/Personal/MyInformation/PersonalInformation";
import MyFavorite from "@/components/Personal/MyFavorite/MyFavorite";
import History from "@/components/Personal/History/History";

export default {
  name: "Personal",
  components: {
    personal_menu,
    Address,
    MyFavorite,
    OrderSend,
    OrderNotSend,
    PersonalInformation,
    History
  },
  data() {
    return {
      page:1,
      shelter:false
    }
  },
  methods: {
    getData(page) {
      console.log(page)
      this.page=page
    },
    ShowShelter(){
      this.shelter=true
    },
    CloseShelter(){
      this.shelter=false
    }
  },
  mounted() {
    if(this.$route.query.from!=undefined){
      this.$refs.menu.defaultPage=this.$route.query.from
      this.page=parseInt(this.$route.query.from)
    }
  }
}
</script>

<style scoped>
.menu {
  height: 100%;
}
.container {
  height: 100%;
}
.shelter {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
  filter: alpha(opacity=40);
  z-index: 9998;
}
.PersonalInformation {
  height: 510px;
}
.el-main {
  height: 718px;
}
</style>
